import React, { useEffect, useReducer, useRef, useState, useMemo } from 'react';
import { useCallback } from 'react';
import ReactDOM from 'react-dom';
import AA from './component/AA'
// let AAA = React.memo(AA, () => {
//   // 功能类似于shouldUpdate  但是结果时相反的
//   //  返回true就不更新了 返回false就更新
//   return false
// })
let AAA = React.memo(AA) // 没有第二个参数的时候 就跟PureComponent 功能一样

/* 
  useMemo 用来缓存对象的一个hook
  useCallback 用来缓存函数的一个hook

  React.memo  useMemo  useCallback 都是优化使用的

*/

/* 

   useEffect(() => {
    console.log(h1.current)
  }) 类似于 类组件的 didMount  didUpdate 结合体


  useEffect(() => {
    console.log(h1.current)
  }, []) 类似 类组件的 didMount


  useEffect(() => {
    console.log(h1.current)
  }, [count]) 初次加载回调函数要执行； 每当count更改的时候也会执行这个回调函数
*/
let num = 0
function App() {
  let [count, setCount] = useState(100)
  let h1 = useRef()
  // let obj = { age: 100 }
  let obj = useMemo(() => {
    return { age: 100 }
  }, [])
  useEffect(() => {
    num++
    console.log('didmount', num)
    return () => {
      console.log("组件销毁了", num)
      // 这个函数类似于 类组件的 unMount
      // 这个函数实际上会在下一次useEffect对应的回调函数执行之前调用
    }
  }, [count])
  let fn = () => { }
  fn = useCallback(fn, [])
  return <>
    <h1 ref={h1}>{count}</h1>
    <button onClick={() => setCount(count + 1)}>+</button>
    {/* {
      count % 2 ? <AA></AA> : null
    } */}
    <AAA obj={obj} onQQQ={fn}></AAA>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))